<!--
 * @Author: your name
 * @Date: 2022-11-06 22:37:54
 * @LastEditTime: 2022-11-07 13:31:30
 * @LastEditors: DESKTOP-I9IOH8S
 * @Description: 复刻腾讯课堂分页
 * @FilePath: \myTencentClassComment\page.html
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页</title>

    <style type="text/css">
        a,
        span {
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div class="page-btn-wrap">

    </div>

    <script type="text/javascript">
        var oPageBtnWrap = document.getElementsByClassName('page-btn-wrap')[0],
            curPage = 1,
            pageNums = 20;

        oPageBtnWrap.innerHTML = makeBtnGroup(curPage, pageNums);

        oPageBtnWrap.addEventListener('click', function (e) {
            var e = e || window.e,
                tar = e.target || e.srcElement,
                className = tar.className;
            switch (className) {
                case 'page-btn':
                    curPage = parseInt(tar.getAttribute('data-page'));
                    oPageBtnWrap.innerHTML = makeBtnGroup(curPage, pageNums);
                    break;
                case 'dir-btn prev-btn':
                    curPage -= 1;
                    oPageBtnWrap.innerHTML = makeBtnGroup(curPage, pageNums);
                    break;
                case 'dir-btn next-btn':
                    curPage += 1;
                    oPageBtnWrap.innerHTML = makeBtnGroup(curPage, pageNums);
                    break;
            }

        }, false);


        // 制作分页栏函数
        function makeBtnGroup(curPage, pageNums) {

            /**pageBtnTpl 功能 制作不同类型的分页栏的按钮
         * 参数介绍
         * type 按钮类型 （值：btn 页码, points 省略号）
         * pageNum 页码
         * curPage 当前页页码
         * */
            var pageBtnTpl = function (type, pageNum, curPage) {
                switch (type) {
                    case 'prev':
                        if (curPage == 1) {
                            return '<span class="dir-btn prev-btn disabled">&lt;</span>';
                        } else {
                            return '<a href="javascript:;" class="dir-btn prev-btn">&lt;</a>';
                        }
                        break;
                    case 'next':
                        if (curPage == pageNum) {
                            return '<span class="dir-btn next-btn disabled">&gt;</span>';
                        } else {
                            return '<a href="javascript:;" class="dir-btn next-btn">&gt;</a>';
                        }
                        break;
                    case 'btn':
                        if (curPage == pageNum) {
                            return '<span class="page-btn page-btn-cur">' + pageNum + '</span>';
                        } else {
                            return '<a href="javascript:;" class="page-btn" data-page="' + pageNum + '">' + pageNum + '</a>';
                        }
                    case 'points':
                        return '<span class="points">... </span>';
                }
            }

            var setNumBtn = function (startNum, stopNum, curPage) {
                var temp = '';
                for (var i = startNum; i <= stopNum; i++) {
                    temp += pageBtnTpl('btn', i, curPage);
                }
                return temp;
            }

            var btnGroup = '';

            btnGroup += pageBtnTpl('prev', pageNums, curPage);
            if (pageNums > 7) {
                if (curPage >= 1 && curPage < 3) {
                    btnGroup += setNumBtn(1, 3, curPage);
                    btnGroup += pageBtnTpl('points');
                    btnGroup += setNumBtn(pageNums - 1, pageNums, curPage);
                } else if (curPage >= 3 && curPage < 5) {
                    btnGroup += setNumBtn(1, curPage + 1, curPage);
                    btnGroup += pageBtnTpl('points');
                    btnGroup += setNumBtn(pageNums - 1, pageNums, curPage);
                } else if (curPage >= 5 && curPage < pageNums - 3) {
                    btnGroup += setNumBtn(1, 2, curPage);
                    btnGroup += pageBtnTpl('points');
                    btnGroup += setNumBtn(curPage - 1, curPage + 1, curPage);
                    btnGroup += pageBtnTpl('points');
                    btnGroup += setNumBtn(pageNums - 1, pageNums, curPage);
                } else if (curPage >= pageNums - 3 && curPage < pageNums) {
                    btnGroup += setNumBtn(1, 2, curPage);
                    btnGroup += pageBtnTpl('points');
                    btnGroup += setNumBtn(curPage - 1, pageNums, curPage);
                } else if (curPage === pageNums) {
                    btnGroup += setNumBtn(1, 2, curPage);
                    btnGroup += pageBtnTpl('points');
                    btnGroup += setNumBtn(curPage - 2, pageNums, curPage);
                }
            } else {
                btnGroup += setNumBtn(1, pageNums, curPage);
            }
            btnGroup += pageBtnTpl('next', pageNums, curPage);

            return btnGroup;
        }










        // 草稿

        // if (curPage >= 1 && curPage < 3) {
        //     // for (var i = 1; i <= 3; i++) {
        //     //     btnGroup += pageBtnTpl('btn', i, curPage);
        //     // }
        //     setNumBtn(1,3);
        //     btnGroup += pageBtnTpl('points');
        //     // for (var i = pageNums - 1; i <= pageNums; i++) {
        //     //     btnGroup += pageBtnTpl('btn', i, curPage);
        //     // }
        //     setNumBtn(pageNums - 1, pageNums);
        // } else if (curPage >= 3 && curPage < 5) {
        //     // for (var i = 1; i <= curPage + 1; i++) {
        //     //     btnGroup += pageBtnTpl('btn', i, curPage);
        //     // }
        //     setNumBtn(1, curPage + 1);
        //     btnGroup += pageBtnTpl('points');
        //     // for (var i = pageNums - 1; i <= pageNums; i++) {
        //     //     btnGroup += pageBtnTpl('btn', i, curPage);
        //     // }
        //     setNumBtn(pageNums - 1, pageNums);
        // } else if (curPage >= 5 && curPage < pageNums - 3) {
        //     // for (var i = 1; i <= 2; i++) {
        //     //     btnGroup += pageBtnTpl('btn', i, curPage);
        //     // }
        //     setNumBtn(1, 2);
        //     btnGroup += pageBtnTpl('points');
        //     // for (var i = curPage - 1; i <= curPage + 1; i++) {
        //     //     btnGroup += pageBtnTpl('btn', i, curPage);
        //     // }
        //     setNumBtn(curPage - 1, curPage + 1);
        //     btnGroup += pageBtnTpl('points');
        //     // for (var i = pageNums - 1; i <= pageNums; i++) {
        //     //     btnGroup += pageBtnTpl('btn', i, curPage);
        //     // }
        //     setNumBtn(pageNums - 1, pageNums);
        // } else if (curPage >= pageNums - 3 && curPage < pageNums) {
        //     // for (var i = 1; i <= 2; i++) {
        //     //     btnGroup += pageBtnTpl('btn', i, curPage);
        //     // }
        //     setNumBtn(1, 2);
        //     btnGroup += pageBtnTpl('points');
        //     // for (var i = curPage - 1; i <= pageNums; i++) {
        //     //     btnGroup += pageBtnTpl('btn', i, curPage);
        //     // }
        //     setNumBtn(curPage - 1, pageNums);
        // } else if (curPage === pageNums) {
        //     // for (var i = 1; i <= 2; i++) {
        //     //     btnGroup += pageBtnTpl('btn', i, curPage);
        //     // }
        //     setNumBtn(1, 2);
        //     btnGroup += pageBtnTpl('points');
        //     // for (var i = curPage - 2; i <= pageNums; i++) {
        //     //     btnGroup += pageBtnTpl('btn', i, curPage);
        //     // }
        //     setNumBtn(curPage - 2, pageNums);
        // }

    </script>
</body>

</html>